<template>
	<view class="container">
		<nav-bar>个人信息</nav-bar>

		<view class="info-list">
			<view class="info-item">
				<view class="info-title">头像</view>
				<image class="info-image" :src="userInfo.userEntity.headImg ? userInfo.userEntity.headImg : missUrl" @tap="chooseImage" />
				<!-- <i class="icon iconfont iconic-arrow-right info-arrow"></i> -->
				<image class="arrow-right" :src="rightUrl"></image>

			</view>

			<view class="info-item" @tap="onChangeNameClick">
				<view class="info-title">名字</view>
				<text class="info-detail">{{userInfo.userEntity.name}}</text>
				<!-- <i class="icon iconfont iconic-arrow-right info-arrow"></i> -->
				<image class="arrow-right" :src="rightUrl"></image>
			</view>

			<view class="info-item" @tap="onChangeMobileClick">
				<view class="info-title">手机号</view>
				<text class="info-detail">{{userInfo.userEntity.mobile ? userInfo.userEntity.mobile : '未填写'}}</text>
				<image class="arrow-right" :src="rightUrl"></image>
			</view>

			<view class="info-item" @tap="onChangeEmailClick">
				<view class="info-title">邮箱</view>
				<text class="info-detail">{{userInfo.userEntity.email ? userInfo.userEntity.email : '未填写'}}</text>
				<!-- <i class="icon iconfont iconic-arrow-right info-arrow"></i> -->
				<image class="arrow-right" :src="rightUrl"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import myInfoMenuData from '@/common/test_jsons/myinfo_menu.js';
	import testDeptList from "@/common/test_jsons/dept_list.js";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';

	import inputAutocomplete from '@/components/input-autocomplete/input-autocomplete.vue';

	import {
		getUserCenter,
		addUserCenter
	} from '@/services/account.js';

	export default {
		computed: {
			...mapState(["userInfo", "activeMenu"]),
		},

		components: {
			uniPopup,
			inputAutocomplete
		},

		data() {
			return {
				rightUrl: "/static/" + 'right-arrow-gray.png',
				missUrl: "/static/" + 'missing-face.png',
				menulist: myInfoMenuData,
				sourceTypeIndex: 2,
				candidateList: [],

				userName: "",
				userMobile: "",
				userMail: "",
			}
		},

		onLoad() {

		},

		onShow() {

			
			this.checkChangeInfo()
		},

		methods: {
			...mapMutations(['login']),
			getUserInfos() {
				console.log(this.userInfo)
				uni.showLoading()
				getUserCenter({
					ID: this.userInfo.userEntity.id
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						//todo 数据转化
						this.login(res.data);
					}
				});
			},

			onChangeMobileClick() {
				uni.navigateTo({
					url: '/pages/account/changeInfo?infotype=mobile&key=userMobile'
				})
			},

			onChangeEmailClick() {
				uni.navigateTo({
					url: '/pages/account/changeInfo?infotype=email&key=userMail'
				})
			},

			onChangeNameClick() {
				uni.navigateTo({
					url: '/pages/account/changeInfo?infotype=name&key=userName'
				})
			},

			async checkPermission(code) {
				let type = code ? code - 1 : this.sourceTypeIndex;
				let status = permision.isIOS ? await permision.requestIOS(['album', 'camera']) :
					await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
						'android.permission.READ_EXTERNAL_STORAGE');

				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "没有开启权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},

			chooseImage: async function() {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif
				let _self = this
				uni.chooseImage({
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					count: 1,
					success: (res) => {
						let imagePath = res.tempFilePaths[0];
						console.log('before : ' + imagePath)
						if (imagePath) {
							// uploadFile(imagePath, {
							// 	type: 'interaction'
							// }, (res) => {
							// 	let obj = JSON.parse(res.data);
							// 	if (obj) {
							// 		let param = {
							// 			profile: obj.data
							// 		}
							// 		_self.setUserInfos(param)

							// 	} else {
							// 		uni.showToast({
							// 			title: '上传图片失败'
							// 		})
							// 	}


							// });
						} else {
							uni.showToast({
								title: '选择的图片异常'
							})
						}
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && _self.sourceTypeIndex === 2) {
							_self.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			//在这里可动态加载提示数据，input-autocomplete有做防抖处理（需设置debounce属性）
			loadAutocompleteData(value) {
				console.log('每次输入经过防抖处理以后都会进到这里');
				console.log('此参数就是输入框的值：', value);

				if (value.length < 3) {
					return Promise.resolve(['输入三个东西哦']);
				}

				let that = this.$root;
				return queryTenantList({
					name: value
				}).then((res) => {
					if (res.code == '000000') {
						if (res.data.length != 0) {
							let names = [];
							for (let i = 0; i < res.data.length; i++) {
								names[i] = res.data[i].name + ' | ' + res.data[i].tenantCode
							}
							that.candidateList = res.data;
							return Promise.resolve(names);
						} else {
							console.log('请求失败')
							return Promise.resolve(["请求失败"]);
						}
					}
				});
				return Promise.resolve(['没有数据了']);
			},
		
			checkChangeInfo() {
				let tempData = {};
				if(this.userName != "") {
					tempData.UserName = this.userName;
				}
				if(this.userName != "") {
					tempData.UserMobile = this.userMobile;
				}
				if(this.userMail != "") {
					tempData.UserMail = this.userMail;
				}
				this.changeUserInfo(tempData);
			},
			
			
			
			// UserAccount: "admin"
			// UserGender: 1
			// UserGuid: "90eb0c6350ce4284828e633304decc01"
			// UserLang: ""
			// UserMobile: "13572406964"
			// UserName: "管理员"
			// UserPassword: "123456"
			// UserRoleID: 1
			// UserRoleName: ""
			// UserStatus: 1
			// UserTelephone: ""
			// Request URL: http://localhost:8082/api/UserCenter/addUserCenter

			changeUserInfo(data) {
				// if(data)
				data.UserGuid = this.userInfo.userEntity.id
				
				addUserCenter(data).then((res) => {
					this.userName = "";
					this.userMobile = "";
					this.userMail = "";
					this.getUserInfos();
				})
			}
		}
	}
</script>

<style lang='scss'>
	.container {
		padding: 32upx;
	}

	.register_text {
		font-size: 56upx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 64upx;
		margin-top: 32upx;
	}

	.info-list {
		margin-top: 0upx;
	}

	.info-item {
		width: 100%;
		height: 100upx;
		align-items: center;
		display: flex;
		position: relative;

		.info-title {
			font-size: 28upx;
			color: rgba(153, 153, 153, 1);
			line-height: 40upx;
		}

		.arrow-right {
			width: 32upx;
			height: 32upx;
			right: 4upx;
			position: absolute;
		}

		.info-image {
			width: 64upx;
			height: 64upx;
			right: 60upx;
			position: absolute;
			border: 1upx solid #ffffff88;
			border-radius: 50%;
		}

		.info-input {
			width: 320upx;
			height: 60upx;
			right: 60upx;
			text-align: right;
			position: absolute;
		}

		.info-detail {
			font-size: 32upx;
			/* height: 60upx; */
			right: 60upx;
			text-align: center;
			position: absolute;
		}

		.info-arrow {
			font-size: 12upx;
			right: 16upx;
			position: absolute;
		}

		.info-radiogroup {
			right: 20upx;
			position: absolute;
		}
	}

	.info-divider {
		padding-bottom: 32upx;
		font-size: 36upx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 44upx;
	}

	.dept-items {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		padding: 32upx 0 32upx 0;
	}

	.defaltset-items-text {
		font-size: 24upx;
		color: rgba(51, 51, 51, 1);
		line-height: 40upx;

		margin-left: 16upx;
	}

	.dept-items-title {
		font-size: 28upx;
		color: rgba(153, 153, 153, 1);
		line-height: 40upx;
	}

	.dept-items-value {
		font-size: 32upx;
		color: rgba(51, 51, 51, 1);
		line-height: 40upx;
	}

	.dept-items-current-tag {
		background: rgba(213, 72, 64, 1);
		border-radius: 4px;
		color: #FFFFFF;
		width: 64upx;
		text-align: center;

		margin-right: 16upx;
	}

	.add-dept-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 22upx 0 22upx 0;
		border-radius: 8upx;
		border: 1upx solid rgba(221, 221, 221, 1);
	}

	.add-popup {
		width: 750upx;
		height: 768upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 32upx 32upx 0px 0px;
		padding: 32upx;
	}

	.add-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.add-head-opt {
		font-size: 28upx;
		color: rgba(153, 153, 153, 1);
		line-height: 40upx;
	}

	.add-head-title {
		font-size: 32upx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 44upx;
	}

	.next-btn {
		margin-top: 64upx;
	}
</style>
